<template>
  <div class="app-container">
    <!--    <el-form ref="form" :model="form" label-width="70px">-->
    <!--      <el-row :gutter="24">-->
    <!--        <el-col :span="4">-->
    <!--          <el-form-item label="名称" prop="nickName">-->
    <!--            <el-input v-model="form.name" placeholder="请输入优惠劵名称" />-->
    <!--          </el-form-item>-->
    <!--        </el-col>-->

    <!--        <el-col :span="6">-->
    <!--          <el-button type="primary" @click="loadData">搜索</el-button>-->
    <!--          <el-button @click="searchResetForm('form')">重 置</el-button>-->

    <!--        </el-col>-->
    <!--      </el-row>-->
    <!--    </el-form>-->

    <div style="margin-bottom: 20px;">
      <el-button type="primary" @click="add('formLabelAlign')">添加</el-button>
    </div>

    <Column :columns="columnLists" :rows="tableData" :loading="loading" @del="del" @edit="edit" />

    <Pagination :total="total" :current-page="pageNum" :page-size="pageSize" @handleChange="handleChange" />

    <el-dialog :title="title" :close-on-click-modal="false" :visible.sync="dialogVisible" width="40%">
      <el-form ref="formLabelAlign" :model="formLabelAlign" :rules="rules" label-width="140px">
        <el-row>
          <el-col :span="10">
            <el-form-item label="抢单开始时间" prop="startTime">
              <el-time-picker
                v-model="formLabelAlign.startTime"
                value-format="HH:mm"
                format="HH:mm"
                placeholder="请选择抢单开始时间"
              />
            </el-form-item>
          </el-col>

        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="抢单结束时间" prop="endTime">
              <el-time-picker
                v-model="formLabelAlign.endTime"
                value-format="HH:mm"
                format="HH:mm"
                placeholder="请选择抢单开始时间"
              />
            </el-form-item>
          </el-col>

        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="提前多久倒计时" prop="countDown">
              <el-input v-model="formLabelAlign.countDown">
                <template slot="append">分钟</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="是否生效" prop="state">
              <el-radio v-model="formLabelAlign.state" :label="0">是</el-radio>
              <el-radio v-model="formLabelAlign.state" :label="1">否</el-radio>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="mini" @click="save('formLabelAlign')">确 定</el-button>
        <el-button size="mini" @click="resetForm('formLabelAlign')">重 置</el-button>
        <el-button size="mini" type="danger" @click="cancel('formLabelAlign')">关 闭</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>

import { showData, resetForm, validate, success, fail } from '@/api/common'
import Pagination from '@/components/Pagination'
import Column from '@/components/Column'
import { get, lists, post, del } from '@/api/requestCommon'
export default {
  name: 'PagePermission',
  components: {
    Pagination,
    Column
  },
  data() {
    return {
      imageData: [],
      pageNum: 1, pageSize: 10, total: 0,
      form: { name: '' },
      tableData: [],
      selectRows: [],
      dialogVisible: false,
      title: '添加抢单时间',
      editId: '',
      columnLists: [
        { prop: 'startTime', label: '抢单开始时间' },
        { prop: 'endTime', label: '抢单结束时间' },
        { prop: 'stateName', label: '是否生效' },
        { prop: 'createTime', label: '创建时间' }
      ],
      type: 'shop',

      rules: {
        startTime: [
          { required: true, message: '请选择开始抢单时间', trigger: 'change' }
        ],
        endTime: [
          { required: true, message: '请选择结束抢单时间', trigger: 'change' }
        ],
        countDown: [
          { required: true, message: '请输入倒计时分钟数', trigger: 'change' }
        ]
      },
      formLabelAlign: {
        id: '',
        startTime: '',
        endTime: '',
        state: 0,
        countDown: ''
      },
      loading: true
    }
  },
  created() {

  },
  mounted() {
    this.loadData()
  },
  methods: {
    add(formName) {
      this.dialogVisible = true
      resetForm(this, formName)
    },

    edit(index) {
      this.title = '编辑抢单时间'
      this.dialogVisible = true
      const row = this.tableData[index]
      get('orderTime/findById/' + row.id).then(response => {
        if (response.code === 200) {
          Object.assign(this.formLabelAlign, response.data)
        }
      })
    },
    cancel(formName) {
      this.$nextTick(() => {
        resetForm(this, formName)
      })
      this.dialogVisible = false
    },

    resetForm(formName) {
      resetForm(this, formName)
    },
    searchResetForm(formName) {
      resetForm(this, formName)
      this.loadData()
    },

    selectionChange(rows) {
      this.selectRows = rows
    },

    handleChange(pageNum, pageSize) {
      this.pageNum = pageNum
      this.pageSize = pageSize
      this.loadData()
    },

    loadData() {
      this.form.pageNum = this.pageNum
      this.form.pageSize = this.pageSize
      lists('orderTime', this.form).then(response => {
        if (response.code === 200) {
          response.data.records.forEach(item => {
            this.imageData.push(item.image)
          })
          showData(response, this)
        }
      })
    },
    del(index) {
      this.$confirm('此操作将永久删除该转拍比例, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        del('orderTime', this.tableData[index].id).then(response => {
          if (response.code === 200) {
            success(response.msg)
            this.loadData()
          } else {
            fail(response.msg)
          }
        })
      }).catch(() => {

      })
    },
    save(formName) {
      if (validate(this, formName)) {
        post('orderTime/save', this.formLabelAlign).then(response => {
          if (response.code === 200) {
            success(response.msg)
            this.dialogVisible = false
            this.loadData()
          } else {
            fail(response.msg)
          }
        })
      }
    }

  }
}
</script>

<style lang="scss" scoped>

</style>
